<template>
	<view class="list-business">
		<view class="title">选择商机</view>
		<u-search placeholder="请输入" v-model="keyword" @search="getList" @custom="getList"></u-search>
		<uni-list v-if="list.length > 0">
			<radio-group @change="radioChange">
				<uni-list-item v-for="(v, k) in list" :key="k">
					<view slot="header" class="hd">
						<view class="item-title">{{ v.businessName }}</view>
						<view>商机金额:{{ v.money }}</view>
						<view>客户名称:{{ v.customerName }}</view>
					</view>

					<radio slot="footer" :value="v.businessId + ''" :checked="v.businessId == radio" />
				</uni-list-item>
			</radio-group>
		</uni-list>
		<u-empty v-else text="数据为空" mode="list"></u-empty>
		<view class="btn">
			<view class="inner">
				<u-button type="primary" @click="selected">选好了</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'listBusiness',
	props: {
		data: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			// 搜索词
			keyword: '',
			// 选中的值
			radio: '',
			selectValue: '',
			// 列表数据
			list: [],
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		// 获取列表
		async getList() {
			this.selectValue = '';
			let data = {
				isValid: true,
				search: this.keyword,
				customerId: this.data.customerId,
				status_id: 3,
			};
			let res = await this.$api.customer.quotation.business(data);
			if (res.code === 200) {
				this.list = res.data.list || {};
			}
		},
		// radio改变设置值
		radioChange(data) {
			this.selectValue = data.detail.value;
		},
		// 选好了
		selected() {
			if (!this.selectValue) {
				uni.showToast({
					icon: 'none',
					title: '请选择商机',
				});
				return;
			}
			let res = this.list.find((v) => v.businessId == this.selectValue);
			this.$emit('selected', 'business', res);
		},
	},
};
</script>

<style lang="scss" scoped>
.list-business {
	.title {
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		text-align: center;
	}
	.u-search,
	.uni-list {
		margin: 10px 15px !important;
	}

	.uni-list /deep/ {
		margin-bottom: 50px;
		.uni-list-item {
			font-size: 14px;
		}
		.uni-list-item__container {
			padding: 12px 0;
			.hd {
				flex: 1;
				color: #666;
				.item-title {
					color: #333;
				}
			}
		}
		.uni-list-item__content {
			display: none;
		}
		.uni-radio-wrapper {
			transform: scale(0.7);
		}
	}

	.btn {
		height: 60px;
		.inner {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 20;
			background: #fff;
			padding: 10px 15px;
		}
	}
}
</style>